//通用变量
:root {
    // --base-color: rgba(255, 255, 255, 100%); // 基础白，通用白

    --white-color: rgba(255, 255, 255, 100%); // 基础白，通用白 不根据主题变化

    // --primary-color: rgba(66, 159, 252, 100%); // 主题色
    --primary-color-8: rgba(66, 159, 252, 80%); // 主题色80%透明度
    --primary-color-6: rgba(66, 159, 252, 60%); // 主题色60%透明度
    --primary-color-4: rgba(66, 159, 252, 40%); // 主题色40%透明度
    --primary-color-2: rgba(66, 159, 252, 20%); // 主题色20%透明度
    --primary-color-1: rgba(66, 159, 252, 10%); // 主题色10%透明度

    // --success-color: rgba(29, 194, 114, 100%); // 成功
    --success-color-8: rgba(29, 194, 114, 80%); // 成功色80%透明度
    --success-color-6: rgba(29, 194, 114, 60%); // 成功色60%透明度
    --success-color-4: rgba(29, 194, 114, 40%); // 成功色40%透明度
    --success-color-2: rgba(29, 194, 114, 20%); // 成功色20%透明度
    --success-color-1: rgba(29, 194, 114, 10%); // 成功色10%透明度

    // --warning-color: rgba(242, 165, 70, 100%); // 警告
    --warning-color-8: rgba(242, 165, 70, 80%); // 警告色80%透明度
    --warning-color-6: rgba(242, 165, 70, 60%); // 警告色60%透明度
    --warning-color-4: rgba(242, 165, 70, 40%); // 警告色40%透明度
    --warning-color-2: rgba(242, 165, 70, 20%); // 警告色20%透明度
    --warning-color-1: rgba(242, 165, 70, 10%); // 警告色10%透明度

    // --info-color: rgba(144, 147, 153, 100%); // 信息
    --info-color-8: rgba(144, 147, 153, 80%); // 信息色80%透明度
    --info-color-6: rgba(144, 147, 153, 60%); // 信息色60%透明度
    --info-color-4: rgba(144, 147, 153, 40%); // 信息色40%透明度
    --info-color-2: rgba(144, 147, 153, 20%); // 信息色20%透明度
    --info-color-1: rgba(144, 147, 153, 10%); // 信息色10%透明度

    // --error-color: rgba(250, 102, 102, 100%); // 错误
    --error-color-8: rgba(250, 102, 102, 80%); // 信息色80%透明度
    --error-color-6: rgba(250, 102, 102, 60%); // 信息色60%透明度
    --error-color-4: rgba(250, 102, 102, 40%); // 信息色40%透明度
    --error-color-2: rgba(250, 102, 102, 20%); // 信息色20%透明度
    --error-color-1: rgba(250, 102, 102, 10%); // 信息色10%透明度

    --bg-color-8: rgba(245, 247, 250, 80%); // 背景色80%透明度

    --font-weight-blod: 700; // 粗体 Blod

    // 字体大小
    --mini-font: 12px;
    --normal-font: 14px;
    --medium-font: 16px;
    --large-font: 18px;
    --huge-font: 20px;

    // 行高
    --mini-line-height: 20px;
    --normal-line-height: 24px;
    --large-line-height: 26px;
    --huge-line-height: 28px;
}

//亮主题相关css变量
:root {
    --bg-color: rgba(245, 247, 250, 100%); // 背景色

    --popover-bg-color: rgba(245, 247, 250, 80%); // 定制列组件背景颜色

    --bigcard-bg-color: #fff; // 中卡片背景色

    --card-bg-color: rgba(247, 249, 251, 100%); // 中卡片背景色

    --tips-color: rgba(96, 98, 102, 100%); // 提示文本

    --gradient-start: #e0efff; // 渐变开始的颜色

    // 弹窗阴影
    --modal-shadow: 0 3px 4px 0px rgba(125, 172, 219, 0.16), 0 12px 32px 4px rgba(0, 0, 0, 0.04),
        0 8px 20px 0px rgba(0, 0, 0, 0.08);

    --bg-shadow: 0 2px 6px 0 rgba(0, 0, 0, 4%); // 卡片背景阴影

    --input-bg-color: #fff; // 大部分类似input组件背景颜色

    --input-content-color: #fff; // 选择器下拉内容背景颜色

    --loading-bg-color: rgba(255, 255, 255, 0.9); //loading背景颜色

    --th-bg-color: #f5f6f7ff; // 表头的背景色

    --tr-hover-color: #f5f6f7ff; // 鼠标移入表格的颜色

    --td-striped-color: rgba(245, 246, 247, 0.3); // 表格斑马纹颜色
}

//暗主题相关css变量
:root[data-theme-name='dark'] {
    --bg-color: #151f2c; // 背景色

    --popover-bg-color: rgba(66, 159, 252, 0.09); // 定制列组件背景颜色

    --bigcard-bg-color: #102a4d; // 中卡片背景色

    --card-bg-color: #123157; // 中卡片背景色

    --tips-color: #dfe4eb; // 提示文本

    --gradient-start: #0a3a6b; // 渐变开始的颜色

    // 弹窗阴影
    --modal-shadow: 0 3px 4px 0px rgba(0, 20, 41, 0.16), 0 12px 32px 4px rgba(0, 0, 0, 0.04),
        0 8px 20px 0px rgba(0, 4, 8, 0.08);

    --bg-shadow: 0 2px 4px 0 rgba(1, 18, 41, 90%); // 卡片背景阴影

    --input-bg-color: #102a4d; // 大部分类似input组件背景颜色

    --input-content-color: #123157ff; // 选择器下拉内容背景颜色

    --loading-bg-color: rgba(13, 16, 20, 0.9); //loading背景颜色

    --th-bg-color: #183f6eff; // 表头的背景色

    --tr-hover-color: #1c4478; // 鼠标移入表格的颜色

    --td-striped-color: #3a577a; // 表格斑马纹颜色
}